<!DOCTYPE html>
<html lang="en" ng-app="loginApp" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TERM-后台管理系统</title>
    <link th:href="@{/static/images/term.ico}" th:mce_href="images/tab_icon.ico" rel="icon" type="image/x-icon"/>
    <script type="text/javascript" th:src="@{/static/lib/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/jquery.nicescroll.min.js}"></script>
    <style>
        body{ margin:0;font-family:微软雅黑;}
        .left{ width:200px; height:956.11px; border-right:2px solid #CCCCCC ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
        .div1{text-align:center; width:200px; padding-top:10px;}
        .logo{border-bottom:#ccc 1px dotted;}
        .div2{height:40px; line-height:40px;cursor: pointer; font-size:13px; position:relative;border-bottom:#ccc 1px dotted;}
        .xtgl {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(/static/images/1.png);}
        .xwzx {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(/static/images/2.png);}
        .zxcp {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(/static/images/4.png);}
        .lmtj {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(/static/images/8.png);}
        .div3{display: none;cursor:pointer; font-size:13px;}
        .div3 ul{margin:0;padding:0;}
        .div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}
        a{text-decoration: none;color:#000;}
    </style>
</head>
<body>
<div class="left">
    <div class="div1">
        <div class="logo">
            <a th:href="@{/welcome}">
                <img th:src="@{/static/images/logo1.png}" alt=""/>
            </a>
        </div>
        <div class="div2"><div class="xtgl"> </div>系统管理</div>
        <div class="div3">
            <ul>
                <li><a th:href="@{/term/company/list}">公司</a></li>
                <li><a th:href="@{/term/role/add}">角色</a></li>
                <li><a th:href="@{/term/company/add}">员工</a></li>
                <li><a th:href="@{/term/company/add}">修改密码</a></li>
            </ul>
        </div>
        <div class="div2"><div class="xwzx"> </div>新闻中心</div>
        <div class="div3">
            <ul>
                <li><a th:href="@{/term/company/add}">公司</a></li>
                <li><a th:href="@{/term/company/add}">公司</a></li>
                <li><a th:href="@{/term/company/add}">公司</a></li>
            </ul>
        </div>
        <div class="div2"><div class="zxcp"> </div>最新产品</div>
        <div class="div3">
            <ul>
                <li><a th:href="@{/term/company/add}">公司</a></li>
                <li><a th:href="@{/term/company/add}">公司</a></li>
                <li>添加图片</li>
            </ul>
        </div>
        <div class="div2"><div class="lmtj"> </div> 栏目添加</div>
        <div class="div3">
            <ul>
                <li>文章系统</li>
                <li>图片系统</li>
                <li>添加表单</li>
                <li>招聘系统</li>
            </ul>
        </div>
    </div>
</div>
<iframe th:src="@{/welcome}" style="position: absolute;left: 201px;top: -2px;width: 100%;height: 100%;" frameborder="0"></iframe>
<script type="text/javascript">
    $(document).ready(function(){
        $('.div1').niceScroll({cursorborder:'',cursorcolor:'#000',cursoropacitymax:'0.5'});
        $('.logo a').click(function(event) {
            event.preventDefault();
            event.stopPropagation();
            $('iframe').attr('src',$(this).attr('href'));
            $('iframe').width($(window).width()-$('.div1').outerWidth());
        });
        $('ul li a').click(function(event) {
            event.preventDefault();
            event.stopPropagation();
            $('iframe').attr('src',$(this).attr('href'));
            $('iframe').width($(window).width()-$('.div1').outerWidth());
        });
        $(window).resize(function(){
            $('.div1').getNiceScroll().resize();
            $('iframe').width($(window).width()-$('.div1').outerWidth());
        });
        $(".div2").click(function(){
            $(this).next("div").slideToggle("slow")
                        .siblings(".div3:visible").slideUp("slow");
        });
//        $(document).off('click').on('click','.div3 ul ui a',function(event){
//            event.preventDefault();
//            $('iframe').attr('src',$(this).attr('href'));
//            $(this).addClass('click').siblings('a').each(function(){
//                $(this).removeClass('click');
//            });
//        });

    });
</script>
</body>
</html>
